import React, { FC, useState } from 'react'
import { Typography, Spin, Table, Pagination } from 'antd'
import { useRequest } from 'ahooks'
import { useParams } from 'react-router-dom'
import { getQuestionStatListService } from '../../../../services/stat'
import useGetComponentInfo from '../../../../hooks/useGetComponentInfo'
import { STAT_PAGE_SIZE } from '../../../../constant'

const { Title } = Typography

type PropsType = {
    selectedComponentId: string
    setSelectedComponentId: (id: string) => void
    setSelectedComponentType: (type: string) => void
}

const PageStat: FC<PropsType> = (props: PropsType) => {
    const { selectedComponentId, setSelectedComponentId, setSelectedComponentType } = props
    const { id = '' } = useParams()
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(STAT_PAGE_SIZE)
    const [total, setTotal] = useState(0)
    const [list, setList] = useState([])
    const { loading } = useRequest(
        async () => {
            const res = await getQuestionStatListService(id, { page, pageSize })
            return res
        },
        {
            refreshDeps: [id, page, pageSize], // 依赖于id、page、pageSize的改变而重新加载页面数据
            onSuccess(res) {
                const { total, list = [] } = res
                setTotal(total)
                setList(list)
            },
        }
    )

    const { componentsList } = useGetComponentInfo()
    const columns = componentsList.map(c => {
        const { fe_id, title, props = {}, type } = c

        // !. 的意思是跳过类型检查，强制获取属性，如果没有则显示c.title
        const colTitle = props!.title || title

        return {
            // title: colTitle,
            title: (
                <div
                    style={{ cursor: 'pointer' }}
                    onClick={() => {
                        setSelectedComponentId(fe_id)
                        setSelectedComponentType(type)
                    }}
                >
                    <span style={{ color: fe_id === selectedComponentId ? '#1890ff' : 'inherit' }}>
                        {colTitle}
                    </span>
                </div>
            ),
            dataIndex: fe_id,
        }
    })

    const dataSource = list.map((i: any) => ({ ...i, key: i._id }))
    const TableElem = (
        <>
            <Table columns={columns} dataSource={dataSource} pagination={false}></Table>
            <div
                style={{
                    textAlign: 'center',
                    marginTop: '18px',
                    display: 'flex',
                    justifyContent: 'center',
                }}
            >
                <Pagination
                    total={total}
                    pageSize={pageSize}
                    current={page}
                    onChange={page => setPage(page)}
                    onShowSizeChange={(page, pageSize) => {
                        setPage(page)
                        setPageSize(pageSize)
                    }}
                />
            </div>
        </>
    )

    return (
        <div>
            <Title level={3}>答卷数量: {!loading && total}</Title>
            {loading && (
                <div style={{ textAlign: 'center' }}>
                    <Spin />
                </div>
            )}
            {!loading && TableElem}
        </div>
    )
}

export default PageStat
